<template>
  <div>
     <head_view title="我的" noticecurrentMark="true"></head_view> 
     <article>
         <div class="m_info">
             <div>
                 <div class="m_data clearfix">
                     <div class="fl"><img src="../../../common/images/default_women.png"></div> 
                     <div class="fl">
                         <p>刘艳</p>
                         <p>工号：<em class="fsz">344558</em></p>
                     </div>
                 </div>
             </div>
         </div><!--m_info ed-->
       <div class="m_items">
           <ul>
               <router-link to="myperformance" tag="li" >
                     <a href="javascript:;"><em></em><i>我的业绩</i></a>
               </router-link>
               <router-link to="myincome" tag="li" >
                     <a href="javascript:;"><em></em><i>我的收入</i></a>
               </router-link>
               <router-link to="myranking" tag="li" >
                     <a href="javascript:;"><em></em><i>我的排名</i></a>
               </router-link>
               <router-link to="myevaluate" tag="li" >
                     <a href="javascript:;"><em></em><i>我的评价</i></a>
               </router-link>
               <router-link to="mycoupon" tag="li" >
                     <a href="javascript:;"><em></em><i>我的优惠券</i></a>
               </router-link>
               <router-link to="mycode" tag="li" >
                     <a href="javascript:;"><em></em><i>我的二维码</i></a>
               </router-link>
               <router-link to="clock" tag="li" >
                     <a href="javascript:;"><em></em><i>打卡记录</i></a>
               </router-link>
           </ul>
           <ul>
               <router-link to="setting" tag="li" >
                     <a href="javascript:;"><em></em><i>设置</i></a>
               </router-link>
           </ul>
       </div><!--m_items ed-->
     </article>
    <router-view></router-view>
  </div>
</template>

<script>
 import Head from '../../public/head.vue'
  export default {
    data () {
      return {
          
      }
    },
    components:{
         head_view:Head
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
article{
    width:100%;
    position:absolute;
    top:1rem;
    bottom:0.8rem;
    overflow-x:hidden;
    overflow-y:auto;
    .m_info{
        width:100%;
        height:1.5rem;
        background-color:#fff;
        border-bottom:0.01rem solid #c9c9c9;
        &>div{
            width:92%;
            margin:0 auto;
            height:1.5rem;
            background:url(../../../common/images/right_arrow.png) no-repeat;
            background-size:0.15rem 0.25rem;
            background-position:right center;
            .m_data{
                width:100%;
                height:1.5rem;
            }
        }
    }
}
.m_data>div:nth-child(1){
    width:1.34rem;
    img{
        width:1rem;
        height:1rem;
        border-radius:50%;
        -webkit-border-radius:50%;
        border:0.05rem solid #e7e7e7;
        margin-top:0.225rem;
    }
}
.m_data>div:nth-child(2){
    width:68%;
    color:#3e3e3e;
    font-size:0.3rem;
    &>p:nth-child(1){
        margin-top:0.4rem;
        text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
    }
    &>p:nth-child(2){
        color:#a5a5a5;
        font-size:0.24rem;
        text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
        margin-top:0.03rem;
    }
}
.m_items{
    width:100%;
    ul{
        border-top:0.01rem solid #c9c9c9;
        border-bottom:0.01rem solid #c9c9c9;
        margin-top:0.2rem;
        li{
            width:100%;
            background-color:#fff;
            a{
                display:block;
                width:96%;
                height:1rem;
                line-height:1rem;
                margin-left:4%;
                border-bottom:0.01rem solid #eee;
                background:url(../../../common/images/right_arrow.png) no-repeat;
                background-size:0.15rem 0.25rem;
                background-position:96% center;
                font-size:0;
                em{
                    display:inline-block;
                    width:0.31rem;
                    height:0.31rem;
                    background:url(../../../common/images/ours.png) no-repeat;
                    background-size:2.48rem 0.31rem;
                    vertical-align:middle;
                    margin-right:0.2rem;
                }
                i{  
                    display:inline-block;
                    color:#3e3e3e;
                    font-size:0.26rem;
                    vertical-align:middle;
                }
            }
        }
    }
     
}
.m_items ul li:nth-child(1) a em{
    background-position:-0.62rem 0;
}
.m_items ul li:nth-child(2) a em{
    background-position:-1.24rem 0;
}
.m_items ul li:nth-child(3) a em{
    background-position:-1.55rem 0;
}
.m_items ul li:nth-child(4) a em{
    background-position:-2.17rem 0;
}
.m_items ul li:nth-child(5) a em{
    background-position:-1.86rem 0;
}
.m_items ul li:nth-child(6) a em{
    background-position:0 0;
}
.m_items ul li:nth-child(7) a em{
    background-position:-0.31rem 0;
}
.m_items ul:nth-child(2) li:nth-child(1) a em{
    background-position:-0.93rem 0;
}
.m_items ul:nth-child(2){
    margin-bottom:0.2rem;
}
</style>
